<template>
  <div class="parent">
    <h3>suspense + 异步组件 演示</h3>
    <hr>
    <h3>父组件</h3>
    <br>
    <suspense>
      <template v-slot:default>
        <Child></Child>
      </template>
      <template v-slot:fallback>
        <h3>正在加载,请稍候...</h3>
      </template>
    </suspense>
  </div>

  <hr>
  <p>
    注意:<br>
    &nbsp;&nbsp;1). <b>suspense</b>组件有两个插槽。它们都只接收一个直接子节点。default 插槽里的节点会尽可能展示出来。如果不能，则展示 fallback 插槽里的节点。<br>
    &nbsp;&nbsp;2). 重要的是，异步组件不需要作为 <b>suspense</b> 的直接子节点。它可以出现在组件树任意深度的位置，且不需要出现在和 <b>suspense</b> 自身相同的模板中。只有所有的后代组件都准备就绪，该内容才会被认为解析完毕。<br>
    &nbsp;&nbsp;官方文档: <a href="https://v3.cn.vuejs.org/guide/migration/suspense.html"><b>suspense</b></a>
  </p>
</template>

<script>
// import child from './child.vue' //静态引入

import {defineAsyncComponent} from 'vue'
const Child = defineAsyncComponent( ()=> import('./child')) //异步引入

export default {
  components: {
    Child
  },
}
</script>

<style scoped>
  .parent {
    background-color: #8ae;
    padding: 10px;
  }
</style>